<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<title>JAVAscript练习</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<link rel="shortcut icon" href="http://pengjianquan.pro.bluej.cn/resume/favicon.ico" />
		<link rel="stylesheet" type="text/css" href="../../index.css"/>
	</head>

	<BODY>
		<pre><h1>JAVAscript练习</a></h1></pre>
		<div id="div1" class="box box-re form-inline">
			1、switch判断练习<br><br> 弹出问候 分析：<br>
			<input type="text" class="form-control" placeholder="姓名" />
			<select class="form-control">
				<option value="0">性别</option>
				<option value="1">男</option>
				<option value="2">女</option>
			</select>
			<button class="btn btn-info">问候</button><br>
		</div>
		<div id="div2" class="box box-re form-inline">
			2、三目运算符练习<br><br> 例1、随便输入一个数字，判断是单数还是双数。
			<br>
			<input type="text" class="form-control" placeholder="数字" /> <button class="btn btn-info">判断单双</button><br>
		</div>
		<div id="div3" class="box box-re form-inline">
			3、break、continue批量改色练习。<br><br> 分析：获取所有li，做li的循环，当循环到第二个的时候，执行break或continue。这个循环执行到break以后，就跳出去了，不再循环了，也就是后边的li颜色不会再改了。当执行到continue的时候，跳出当前循环后执行下一个循环。
			<ul class="list-group">
				<li class="list-group-item">break、continue练习</li>
				<li class="list-group-item">break、continue练习</li>
				<li class="list-group-item">break、continue练习</li>
				<li class="list-group-item">break、continue练习</li>
				<li class="list-group-item">break、continue练习</li>
			</ul>
			<button class="btn btn-info">break</button> <button class="btn btn-info">continue</button>
		</div>

		<div id="Record" class="box box-re red">
			记录<br>
			<p><b>判断：</b>if、switch、?:（三目运算符）</p>
			<p><b>循环：</b>while、for</p>
			<p><b>跳出：</b>break（中断-整个循环中断）、continue（继续-本次循环中断）</p>
			<p><b>取得select选中值：</b>首先获取select对象，拿到选中项的索引：var index=select.selectedIndex;，selectedIndex代表的是所选中项的index，拿到选中项options的value：select.options[index].value;拿到选中项options的text：select.options[index].text;</p>
			<p><b>?:：</b>三目运算符（三元），与if一样。if的写法是if(条件){语句1}else{语句2}，三目的写法是：条件?语句1:语句2。</p>
			<p><b>什么是真、什么是假：</b></p>
			<p><b>真：true</b>非零数字、非空字符串、非空对象</p>
			<p><b>假：false</b>数字零、空字符串、空对象、undefined</p>
		</div>
			<script>
				// 1、switch判断练习

				// 弹出问候 分析：

				(function (){
					var div_1 = document.getElementById('div1');
					var input = div_1.querySelector('input');
					var select = div_1.querySelector('select');
					var btn = div_1.querySelector('button');
					btn.addEventListener('click',function (){
						if ( input.value == '' ) {
							alert('姓名不能为空');
							return false;
						}
						switch(true){
							case select.value == 0 : {
								alert('性别不能为空');
								break;
							}
							case select.value == 1 : {
								alert('Hello guy ' + input.value);
								break;
							}
							case select.value == 2 : {
								alert('Hi girl' + input.value);
								break;
							}
							default:
								break;
						}
					});
				})();


				// 2、三目运算符练习
				// 随便输入一个数字，判断是单数还是双数。 
				(function(){
					var div_2 = document.getElementById('div2');
					var input = div_2.querySelector('input');
					var btn = div_2.querySelector('button');
					btn.addEventListener('click', function (){
						if (isNaN(input.value) == true) {
							input.value = '';
							return false;
						}
						var input_val = parseInt(input.value);
						alert(input_val % 2 == 1 ? '单数' : '双数'); 
					});
				})();


				// 3、break、continue批量改色练习。

				// 分析：获取所有li，做li的循环，当循环到第二个的时候，执行break或continue。这个循环执行到break以后，就跳出去了，不再循环了，也就是后边的li颜色不会再改了。当执行到continue的时候，跳出当前循环后执行下一个循环。

				(function () {
					var div_3 = document.getElementById('div3');
					var lis = div_3.querySelector('.list-group').children;
					var continue_btn = div_3.getElementsByTagName('button')[0];
					var break_btn = div_3.getElementsByTagName('button')[1];
					var continue_triggle = false;
					var break_triggle = false;
					continue_btn.addEventListener('click', function() {
						continue_triggle = true;
						break_triggle = false;
						resetBg();
						changeBg();
					});

					break_btn.addEventListener('click', function () {
						break_triggle = true; 
						continue_triggle = false;
						resetBg();
						changeBg();
					})

					function resetBg(){
						for ( var i = 0; i < lis.length; i++ ){
							lis[i].style.background = 'white';
						}
					}
					function changeBg(){
						for ( var i = 0; i < lis.length; i++ ){
		
							if ( i == 1 && continue_triggle == true ) continue;
														
							if ( i == 1 && break_triggle == true ) break;
												
							lis[i].style.background = 'skyblue';
						}
					}


				})();
			</script>
	</BODY>

</HTML>